<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width:300px;
      height:110px;
    }
    div>img{
      height:100px;
      width:100px;
    }
    .one{
      font-size:20px;/*随便写  加不加效果和原始的差不多*/
    }
    .two{
      font-size:1px;
    }
    .three{
      font-size:0px;
    }
  </style>
</head>
<body>
  <div class="one">
    <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/419/w1194h825/20181214/IcGp-hqackac4644695.jpg" alt="">
    <img class="zz" src="http://n.sinaimg.cn/default/1_img/upload/3933d981/419/w1194h825/20181214/IcGp-hqackac4644695.jpg" alt="">  
  </div>
  <div class="two">
    <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/419/w1194h825/20181214/IcGp-hqackac4644695.jpg" alt="">
    <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/419/w1194h825/20181214/IcGp-hqackac4644695.jpg" alt="">  
  </div>
  <div class="three">
    <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/419/w1194h825/20181214/IcGp-hqackac4644695.jpg" alt="">
    <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/419/w1194h825/20181214/IcGp-hqackac4644695.jpg" alt="">  
  </div>
  <script>
  let i=0
  let arr = []
  let timeout = setInterval(function(){
    if(i==200){
      clearInterval(timeout)
      return
    }
    document.querySelector(".one").style.fontSize = i+"px"
    arr.push(document.querySelector(".zz").offsetLeft)
    console.log(arr)
    let ress = []
    let test = []
    let z=0
    arr.forEach((item,index,arr)=>{
      if(!ress.includes(item)){
        ress.push(item)
      }
      let ma = arr[index]
      let count = test[ma]
      if(count){
        test[ma] += 1
      }else{
        test[ma]=1
      }
    })
    console.log(ress,"ress")
    console.log(test,"test")
    i++
  },16)
  </script>
 </body>
</html>